<!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8">
		<title>赛事管理</title>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.css"><!--导入bootstrap的css样式-->
		<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css"><!--导入bootstrap的主体样式-->
		<script type="text/javascript" src="/equipmentSys/js/jquery-1.10.1.js"></script>
		<script src="bootstrap/js/bootstrap.js"></script><!--导入bootstrap的js代码-->
		<script src="vue/unpkg.vue.js"></script><!--导入vue-->
		
		<link rel="stylesheet" href="css/style.css"><!--导入css样式-->
	</head>
	<body>
		<div>
			<!-- 顶部导航 start -->
			<nav class="navbar navbar-fixed-top navbar-inverse">
				<!-- 图标 start -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" aria-expanded="false">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a href="index.html"><img class="gym-logo navbar-brand" src="img/gym.jpg" alt="" /></a>
				</div>
				<!-- 图标 end -->
				
				<!-- 菜单 start -->
				<div class="collapse navbar-collapse">
					<!-- 用户 -->
					<ul id="user-menu" class="nav navbar-nav navbar-right">
						<li class="user dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
								<img class="img-circle" src="img/luna.jpg" />
								<span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li><a href="#">用户名</a></li>
								<li class="divider"></li><!-- 分割线 -->
								<li><a href="#">我的订单</a></li>
								<li><a href="#">修改密码</a></li>
								<li>
									<a href="#" data-toggle="modal" data-target="#log-out">
										<span class="glyphicon glyphicon-log-out"></span>
										退出
									</a>
								</li>
							</ul>
						</li>
						<li class="visitor">
							<a href="#" data-toggle="modal" data-target="#sign-in">
								<span class="glyphicon glyphicon-log-in"></span>
								登录
							</a>
						</li>
						<li class="visitor">
							<a href="#" data-toggle="modal" data-target="#sign-up">
								<span class="glyphicon glyphicon-registration-mark"></span>
								注册
							</a>
						</li>
					</ul>
					
					<!-- 菜单内容 -->
					<ul class="nav navbar-nav">
						<li class="active"><a href="index.html">主页</a></li>
						<!-- 场地管理 -->
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
								场地
								<span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li><a href="#">场地预约</a></li>
								<li><a href="#">场地查询</a></li>
								<li><a href="#">场地公告</a></li>
							</ul>
						</li>
						<!-- 赛事管理 -->
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
								赛事
								<span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li><a href="#">赛事创建</a></li>
								<li><a href="#">赛事查询</a></li>
								<li><a href="#">裁判简介公告</a></li>
							</ul>
						</li>
						<!-- 器材管理 -->
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
								器材
								<span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li><a href="equipment.html">器材租用</a></li>
								<li><a href="#">收费标准</a></li>
							</ul>
						</li>
						
						<!-- 其他 -->
						<li><a href="#" data-toggle="modal" data-target="#about">关于</a></li>
					</ul>
					
				</div>
				<!-- 菜单 end -->
			</nav>
			<!-- 顶部导航 end -->
			
			<!-- 模态框 start -->
			<!-- 关于 模态框-->
			<div id="about" class="modal fade">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title">关于</h4>
						</div>
						<div class="modal-body">
							<p></p>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">了解了</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal-dialog -->
			</div><!-- /.modal -->
			
			<!-- 登录模态框 -->
			<div id="sign-in" class="modal fade">
				<div class="modal-dialog">
					<form action="http://47.107.137.51:8002/login" method="post">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
								<h4><span class="glyphicon glyphicon-log-in"></span>登录</h4>
							</div>
							<div class="modal-body">
									<!-- 一个表单输入框 start -->
									<span class="input-hint">&#12288;</span>
									<div class="form-gorup input-group">
										<label class="input-group-addon" for="sign-in-name">
											<span class="glyphicon glyphicon-user"></span>
											用户名
										</label>
										<input id="sign-in-name" class="form-control" name="username" type="text" />
									</div>
									<!-- 一个表单输入框 end -->
									<!-- password -->
									<span class="input-hint">&#12288;</span>
									<div class="form-group input-group">
										<label class="input-group-addon" for="sign-in-pwd">密码</label>
										<input id="sign-in-pwd" class="form-control" name="password" type="password" />
										<span class="input-group-addon">
											<span class="glyphicon glyphicon-eye-close"></span>
										</span>
									</div>
							</div>
							<div class="modal-footer">
								<button type="submit" class="btn btn-success" name="login">
									<span class="glyphicon glyphicon-log-in"></span>
									登录
								</button>
								<!--<button type="button" class="btn btn-success" data-dismiss="modal">
									<span class="glyphicon glyphicon-log-in"></span>
									登录
								</button>-->
								<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							</div>
						</div>
					</form>
				</div>
			</div>
			
			<!-- 注册模态框 -->
			<div id="sign-up" class="modal fade">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
							<h4><span class="glyphicon glyphicon-registration-mark"></span>注册</h4>
						</div>
						<div class="modal-body">
							<form>
								<!-- 一个表单输入框 start -->
								<span class="input-hint">&#12288;</span>
								<div class="form-group input-group">
									<label class="input-group-addon" for="sign-up-name">
										<span class="glyphicon glyphicon-user"></span>
										用户名
									</label>
									<input id="sign-up-name" class="form-control" type="text" v-model="userName" />
								</div>
								<!-- 一个表单输入框 end -->
								<!-- email -->
								<span class="input-hint">&#12288;</span>
								<div class="form-group input-group">
									<label class="input-group-addon" for="sign-up-email">
										<span class="glyphicon glyphicon-envelope"></span>
										邮箱
									</label>
									<input id="sign-up-email" class="form-control" type="text" v-model="userEmail" />
								</div>
								<!-- password -->
								<span class="input-hint">&#12288;</span>
								<div class="form-group input-group">
									<label class="input-group-addon" for="sign-up-pwd">密码</label>
									<input id="sign-up-pwd" class="form-control" type="password" v-model="userPassword" />
									<span class="input-group-addon">
										<span class="glyphicon glyphicon-eye-close"></span>
									</span>
								</div>
								<!-- confirm password -->
								<span class="input-hint">&#12288;</span>
								<div class="form-group input-group">
									<label class="input-group-addon" for="sign-up-pwd2">确认密码</label>
									<input id="sign-up-pwd2" class="form-control" type="password" />
									<span class="input-group-addon">
										<span class="glyphicon glyphicon-eye-close"></span>
									</span>
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-warning" data-dismiss="modal" @click="signUp">
								<span class="glyphicon glyphicon-registration-mark"></span>
								注册
							</button>
							<button type="button" class="btn btn-defaule" data-dismiss="modal">取消</button>
						</div>
					</div>
				</div>
			</div>
			
			<!-- 确认退出模态框 -->
			<div id="log-out" class="modal fade">
				<div class="modal-dialog modal-sm">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
							<h4><span class="glyphicon glyphicon-log-out"></span>退出</h4>
						</div>
						<div class="modal-body">
							<p>确认退出吗？</p>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-danger" data-dismiss="modal">
								<span class="glyphicon glyphicon-log-out"></span>
								退出
							</button>
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						</div>
					</div>
				</div>
			</div>
			<!-- 模态框 end -->
			
			<div id="match">
				<hr class="divider"><!-- 分界线 -->
				<div class="container">
					<!-- 赛事管理列表 start -->
					<div class="panel panel-primary">
						<div class="panel-heading">
							<h1 class="panel-title">赛事管理</h1>
						</div>
						<div class="panel-body">
							<table class="mt-table table table-bordered table-hover table-striped table-condensed">
								<thead>
									<tr>
										<th>赛事标题</th>
										<th>裁判姓名</th>
										<th>场地</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(mt, mtId) in matchList" v-if="mt.mtId >= 0">
										<td>{{ mt.title }}</td>
										<td v-for="rf in refereeList" v-if="rf.refereeId == mt.refereeId">{{ rf.name }}</td>
										<td v-for="ar in areaList" v-if="ar.areaId == mt.areaId">{{ ar.name }}</td>
										
										<td>
											<button class="btn btn-info btn-sm" data-toggle="modal" data-target="#match-message" @click="getMtId(mtId)">
												查看详情
											</button>
											<button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#update-mt-msg" @click="getMtId(mtId)">编辑</button>
											<button class="btn btn-danger btn-sm" @click="delMatch(mtId)">
												<span class="glyphicon glyphicon-trash"></span>
												删除
											</button>
										</td>
									</tr>
								</tbody>
							</table>
							<button class="btn btn-success" data-toggle="modal" data-target="#apply-match" @click="clearData">
								<span class="glyphicon glyphicon-plus"></span>
								申请赛事
							</button>
						</div>
					</div>
					<!-- 赛事管理列表 end -->
					
					<hr class="divider"><!-- 分界线 -->
					
					<!-- 赛事申请模态框 start -->
					<div id="apply-match" class="modal fade">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
									<h4>创建赛事</h4>
								</div>
								<div class="modal-body">
									<form>
										<!-- 一个表单输入框 start -->
										<span class="input-hint">&#12288;</span>
										<div class="form-group input-group">
											<label class="input-group-addon" for="mt-title">
												<span class="glyphicon glyphicon-pencil"></span>
												赛事标题
											</label>
											<input id="mt-title" class="form-control" type="text" v-model="mtTitle" />
										</div>
										<!-- 一个表单输入框 end -->
										<span class="input-hint">&#12288;</span>
										<div class="form-group input-group">
											<label class="input-group-addon" for="mt-msg">
												<span class="glyphicon glyphicon-paperclip"></span>
												赛事介绍
											</label>
											<textarea id="mt-msg" class="form-control" v-model="mtMessage"></textarea>
										</div>
										
										<hr class="divider"><!-- 分界线 -->
										
										<div class="form-group input-group">
											<label class="input-group-addon" for="mt-referee">
												<span class="glyphicon glyphicon-flag"></span>
												选择裁判
											</label>
											<select id="mt-referee" class="form-control" type="text" v-model="refereeId">
												<option v-for="rf in refereeList">{{ rf.refereeId }}</option>
											</select>
										</div>
										<!-- 浏览裁判信息 -->
										<div class="form-group" v-for="rf in refereeList" v-if="refereeId == rf.refereeId">
											<div class="form-group input-group">
												<label class="input-group-addon" for="rf-name">
													<span class="glyphicon glyphicon-user"></span>
													裁判姓名
												</label>
												<input id="rf-name" readonly="true" class="form-control" type="text" v-model="rf.name" />
											</div>
											<div class="form-group input-group">
												<label class="input-group-addon" for="rf-msg">
													<span class="glyphicon glyphicon-paperclip"></span>
													裁判信息
												</label>
												<textarea id="rf-msg" class="form-control" readonly="true" v-model="rf.message"></textarea>
											</div>
										</div>
										
										<hr class="divider"><!-- 分界线 -->
										
										<div class="form-group input-group">
											<label class="input-group-addon" for="area-id">
												<span class="glyphicon glyphicon-map-marker"></span>
												场地ID
											</label>
											<select id="area-id" class="form-control" type="text" v-model="areaId">
												<option v-for="ar in areaList">{{ ar.areaId }}</option>
											</select>
										</div>
										<!-- 浏览场地信息 -->
										<div class="form-group" v-for="ar in areaList" v-if="areaId == ar.areaId">
											<div class="form-group input-group">
												<label class="input-group-addon" for="ar-name">
													<span class="glyphicon glyphicon-map-marker"></span>
													场地
												</label>
												<input id="ar-name" readonly="true" class="form-control" type="text" v-model="ar.name" />
											</div>
										</div>
									</form>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-success" data-dismiss="modal" @click="createMatch">创建</button>
									<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								</div>
							</div>
						</div>
					</div>
					<!-- 赛事申请模态框 end -->
					
					<!-- 赛事详情模态框 start -->
					<div id="match-message" class="modal fade">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
									<h4>赛事详情</h4>
								</div>
								<div class="modal-body">
									<div v-for="(mt,mtId) in matchList" v-if="mt.mtId == matchList[count].mtId">
										<!-- 标题 -->
										<h3>{{ mt.title }}</h3>
										<hr>
										<!-- 赛事详情 -->
										<label>赛事详情：</label><br>
										<p>{{ mt.message }}</p>
										<!-- 场地 -->
										<div v-for="ar in areaList" v-if="mt.areaId == ar.areaId">
											<p><label>比赛地点：</label>{{ ar.name }}</p>
										</div>
										<!-- 裁判 -->
										<div v-for="rf in refereeList" v-if="mt.refereeId == rf.refereeId">
											<p><label>裁判：</label>{{ rf.name }}</p>
										</div>
										<hr>
										<div id="mtRegister">
											<p><label>申请人：</label>{{ mt.registerId }}</p>
										</div>
									</div>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								</div>
							</div>
						</div>
					</div>
					<!-- 赛事详情模态框 end -->
					
					<!-- 编辑赛事信息模态框 start-->
					<div id="update-mt-msg" class="modal fade">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
									<h4>编辑赛事信息</h4>
								</div>
								<div class="modal-body">
									<form>
										<!-- 赛事标题 -->
										<span class="input-hint">&#12288;</span>
										<div class="form-group input-group">
											<label class="input-group-addon" for="update-title">
												<span class="glyphicon glyphicon-pencil"></span>
												赛事标题
											</label>
											<input id="update-title" class="form-control" type="text" v-model="mtTitle" />
										</div>
										<span class="input-hint">&#12288;</span>
										<div class="form-group input-group">
											<label class="input-group-addon" for="update-msg">
												<span class="glyphicon glyphicon-paperclip"></span>
												赛事介绍
											</label>
											<textarea id="update-msg" class="form-control" v-model="mtMessage"></textarea>
										</div>
										
										<hr class="divider"><!-- 分界线 -->
										
										<div class="form-group input-group">
											<label class="input-group-addon" for="update-rf-id">
												<span class="glyphicon glyphicon-flag"></span>
												选择裁判
											</label>
											<select id="update-rf-id" class="form-control" type="text" v-model="refereeId">
												<option v-for="rf in refereeList">{{ rf.refereeId }}</option>
											</select>
										</div>
										<!-- 浏览裁判信息 -->
										<div class="form-group" v-for="rf in refereeList" v-if="refereeId == rf.refereeId">
											<div class="form-group input-group">
												<label class="input-group-addon" for="update-rf-name">
													<span class="glyphicon glyphicon-user"></span>
													裁判姓名
												</label>
												<input id="update-rf-name" readonly="true" class="form-control" type="text" v-model="rf.name" />
											</div>
											<div class="form-group input-group">
												<label class="input-group-addon" for="update-rf-msg">
													<span class="glyphicon glyphicon-paperclip"></span>
													裁判信息
												</label>
												<input id="update-rf-msg" readonly="true" class="form-control" type="text" v-model="rf.message" />
											</div>
										</div>
										
										<hr class="divider"><!-- 分界线 -->
										
										<div class="form-group input-group">
											<label class="input-group-addon" for="update-area-id">
												<span class="glyphicon glyphicon-map-marker"></span>
												场地ID
											</label>
											<select id="update-area-id" class="form-control" type="text" v-model="areaId">
												<option v-for="ar in areaList">{{ ar.areaId }}</option>
											</select>
										</div>
										<!-- 浏览场地信息 -->
										<div class="form-group" v-for="ar in areaList" v-if="areaId == ar.areaId">
											<div class="form-group input-group">
												<label class="input-group-addon" for="update-ar-name">
													<span class="glyphicon glyphicon-map-marker"></span>
													场地
												</label>
												<input id="update-ar-name" readonly="true" class="form-control" type="text" v-model="ar.name" />
											</div>
										</div>
									</form>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-warning" data-dismiss="modal" @click="updateMatch">编辑</button>
									<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								</div>
							</div>
						</div>
					</div>
					<!-- 编辑赛事信息模态框 end-->
					
					<!-- 裁判 start -->
					<div class="panel panel-primary">
						<div class="panel-heading">
							<h1 class="panel-title">裁判信息列表</h1>
						</div>
						<div class="panel-body">
							<table class="mt-table table table-bordered table-hover table-striped table-condensed">
								<thead>
									<tr>
										<th>裁判姓名</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(rf, rfId) in refereeList">
										<td>{{ rf.name }}</td>
										<td>
											<button class="btn btn-info btn-sm" data-toggle="modal" data-target="#referee-message" @click="getRfId(rfId)">
												查看详情
											</button>
											<button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#update-referee-msg" @click="getRfId(rfId)">编辑</button>
											<button class="btn btn-danger btn-sm" @click="delReferee(rfId)">
												<span class="glyphicon glyphicon-trash"></span>
												删除
											</button>
										</td>
									</tr>
								</tbody>
							</table>
							<button class="btn btn-success" data-toggle="modal" data-target="#add-referee" @click="clearData">
								<span class="glyphicon glyphicon-plus"></span>
								新增裁判
							</button>
						</div>
					</div>
					<!-- 裁判 end -->
					
					<!-- 新增裁判 start -->
					<div id="add-referee" class="modal fade">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
									<h4>新增裁判</h4>
								</div>
								<div class="modal-body">
									<form>
										<!-- 一个表单输入框 start -->
										<span class="input-hint">&#12288;</span>
										<div class="form-group input-group">
											<label class="input-group-addon" for="rf-name">
												<span class="glyphicon glyphicon-user"></span>
												裁判姓名
											</label>
											<input id="rf-name" class="form-control" type="text" v-model="rfName" />
										</div>
										<!-- 一个表单输入框 end -->
										<span class="input-hint">&#12288;</span>
										<div class="form-group input-group">
											<label class="input-group-addon" for="rf-msg">
												<span class="glyphicon glyphicon-paperclip"></span>
												裁判简介
											</label>
											<textarea id="rf-msg" class="form-control" v-model="rfMessage"></textarea>
										</div>
									</form>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-success" data-dismiss="modal" @click="addReferee">添加</button>
									<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								</div>
							</div>
						</div>
					</div>
					<!-- 新增裁判 end -->
					
					<!-- 裁判详细信息 start -->
					<div id="referee-message" class="modal fade">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
									<h4>裁判信息</h4>
								</div>
								<div class="modal-body">
									<div v-for="(rf, rfId) in refereeList" v-if="rf.refereeId == refereeList[count2].refereeId">
										<!-- 裁判姓名 -->
										<h3>{{ rf.name }}</h3>
										<hr>
										<!-- 裁判简介 -->
										<label>裁判简介：</label><br>
										<p>{{ rf.message }}</p>
									</div>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								</div>
							</div>
						</div>
					</div>
					<!-- 裁判详细信息 end -->
					
					<!-- 编辑裁判信息 start-->
					<div id="update-referee-msg" class="modal fade">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
									<h4>编辑赛事信息</h4>
								</div>
								<div class="modal-body">
									<form>
										<!-- 赛事标题 -->
										<span class="input-hint">&#12288;</span>
										<div class="form-group input-group">
											<label class="input-group-addon" for="update-rf-name">
												<span class="glyphicon glyphicon-pencil"></span>
												裁判姓名
											</label>
											<input id="update-rf-name" class="form-control" type="text" v-model="rfName" />
										</div>
										<span class="input-hint">&#12288;</span>
										<div class="form-group input-group">
											<label class="input-group-addon" for="update-rf-msg">
												<span class="glyphicon glyphicon-paperclip"></span>
												裁判简介
											</label>
											<textarea id="update-rf-msg" class="form-control" v-model="rfMessage"></textarea>
										</div>
									</form>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-warning" data-dismiss="modal" @click="updateReferee">编辑</button>
									<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								</div>
							</div>
						</div>
					</div>
					<!-- 编辑裁判信息 end-->
				</div>
			</div>
		</div>
	</body>
	<script src="js/vueCode.js"></script>
</html>